<template>
	<div class="container padding-top-sm">
		<div class="senior-search">
			<div class="e-breadcrumb el-flex text-888 margin-left-sm text-xs">
				<div :class="['e-breadcrumb-item', { 'active': tabPages.type == item.id }]" v-for="(item, index) in breadcrumbList" @click="changeBreadcrumb(item.id)">
					<div class="e-breadcrumb-con el-flex">
						<p>{{ item.title }}</p>
						<span class="count margin-left-xxs" v-if="item.count > 0">{{ item.count }}</span>
						<span class="border"></span>
					</div>
				</div>
			</div>
			<div class="group-search text-sm">
				<el-button type="primary" icon="el-icon-plus" v-if="batch == 8" @click="payApply()">付款申请</el-button>
				<el-button type="primary" class="margin-right-sm" icon="el-icon-user-solid" v-if="batch == 5 && tabPages.type == 'todo'" @click="batchHandle">批量审批</el-button>

				<el-popover placement="bottom" width="400" v-model="showSearchPopover" trigger="manual">
					<div class="text-xs">
						<el-form label-width="100px">
							<el-form-item label="状态">
								<el-select :value="10" v-model="tabPages.status">
									<el-option value label="全部"></el-option>
									<el-option :value="10" label="审批中"></el-option>
									<el-option :value="20" label="已完结"></el-option>
									<el-option :value="30" label="已驳回"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="申请时间" style="margin-top: 6px !important;">
								<el-date-picker v-model="dateRange" @change="onDateChange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
							</el-form-item>

							<el-form-item label="供应商" style="margin-top: 6px !important;">
								<el-input v-model="tabPages.supplier_name" placeholder="请输入供应商名称" />
							</el-form-item>

							<el-form-item label="搜索关键字" style="margin-top: 6px !important;">
								<el-input v-model="tabPages.key" placeholder="供应商名称, 开户行..." />
							</el-form-item>

							<div class="btn-group" style="margin-top: 8px; text-align: right;">
								<el-button @click="cancelSearch">取消</el-button>
								<el-button @click="resetSearch">重置</el-button>

								<el-button slot="reference" class="margin-right-sm" type="primary" icon="el-icon-download" @click="onExportClick">导出</el-button>
								<el-button type="primary" @click="onSearch">搜索</el-button>
							</div>
						</el-form>
					</div>

					<span class="text-blue margin-right-sm cp" style="outline: 0" slot="reference" @click="showSearchPopover = true">
						<i class="el-icon-search margin-right-xxs text-bold">高级查询</i>
					</span>
				</el-popover>

				<span class="margin-bottom-sm">&nbsp;</span>
			</div>
			<!-- multipleSelection   summary-->
			<!-- v-if="tabPages.type=='todo'" -->
		</div>
		<div class="tab">
			<div class="statistics1" v-if="summary && summary.apply && tabPages.type == 'todo'">
				<div class="statistics-item" v-for="(item, index) in summary.apply">
					<div>{{ index }}:</div>
					<div class="label-item" v-for="(val, key) in item">
						<div class v-if="key == 'apply_money'">
							申请总额：
							<span>{{ val }} 元</span>
						</div>
						<div class v-if="key == 'amounts_payable'">
							财务余额累计：
							<span>{{ val }} 元</span>
						</div>
					</div>
				</div>
			</div>
			<div class="statistics" v-if="summary && summary.finance && tabPages.type == 'todo'">
				<div class="statistics-item" v-for="(item, index) in summary.finance">
					<div class="label-item">{{ index }}: &nbsp;&nbsp;</div>
					<div class="val-item">{{ item }} 元</div>
				</div>
			</div>
			<el-table :data="tableData" stripe border height="680" @selection-change="handleSelectionChange" :expand-row-keys="expends" :row-key="getRowKeys">
				<el-table-column width="55" type="expand">
					<template v-slot="scope">
						<div v-if="scope.row.record.length > 0" class="padding-lr padding-tb-xs" style="background: #f5f1ec;padding-right: 240px;">
							<el-card class="box-card">
								<div slot="header" class="clearfix">
									<span>财务批付详情</span>
								</div>
								<el-table :data="scope.row.record" custom-class="dialogchildren" :summary-method="getSummaries" show-summary>
									<el-table-column prop="payment_subject" label="付款主体"></el-table-column>
									<el-table-column prop="payment_methods" label="付款方式"></el-table-column>
									<el-table-column prop="approve_paid" label="批付（元）" width="180px">
										<template slot-scope="scope">
											<span>￥{{ scope.row.approve_paid || 0 }}</span>
										</template>
									</el-table-column>
									<el-table-column prop="actually_paid" label="实付（元）" width="180px">
										<template slot-scope="scope">
											<span>￥{{ scope.row.actually_paid || 0 }}</span>
										</template>
									</el-table-column>
									<el-table-column prop="bank" label="开户行" show-overflow-tooltip></el-table-column>
									<el-table-column prop="account" label="账号" show-overflow-tooltip></el-table-column>
								</el-table>
							</el-card>
						</div>
						<div v-if="scope.row.step == 3 && batch == 4" class="padding-lr padding-tb-xs" style="background: #f5f1ec;padding-right: 240px;" key="scope.row.id">
							<el-card class="box-card">
								<div slot="header" class="clearfix">
									<span>财务批付审批</span>
									<el-button type="primary" @click="submitApprove(2, scope.row.step, scope.row.id)">提交</el-button>
								</div>
								<el-row :gutter="24" class="tab-title">
									<el-col :span="4">付款主体</el-col>
									<el-col :span="4">付款方式</el-col>
									<el-col :span="4">批付（元）</el-col>
									<el-col :span="4">开户行</el-col>
									<el-col :span="4">账号</el-col>
									<el-col :span="4">操作</el-col>
								</el-row>
								<el-row :gutter="24" v-for="(item, index) in todo.payment" class="margin-lr">
									<el-col :span="4">
										<el-select v-model="item.payment_subject">
											<el-option v-for="op in defData.subject" :key="op.id" :label="op.title" :value="op.id"></el-option>
										</el-select>
									</el-col>
									<el-col :span="4">
										<el-select v-model="item.payment_methods">
											<el-option v-for="op in defData.methods" :key="op.id" :label="op.title" :value="op.id"></el-option>
										</el-select>
									</el-col>
									<el-col :span="4">
										<el-input v-model="item.approve_paid" placeholder="请填写批付"></el-input>
									</el-col>
									<el-col :span="4">
										<el-input v-model="item.bank" v-if="item.payment_methods == 3" placeholder="开户行:"></el-input>
										<span v-else>--</span>
									</el-col>
									<el-col :span="4">
										<el-input v-model="item.account" v-if="item.payment_methods == 3" placeholder="账号:"></el-input>
										<span v-else>--</span>
									</el-col>
									<el-col :span="4">
										<span class="text-blue cp" @click="addPay" v-if="todo.payment.length - 1 == index">添加</span>
										<span class="text-blue cp" @click="delPay(index)" v-else>删除</span>
									</el-col>
								</el-row>
							</el-card>
						</div>
					</template>
				</el-table-column>
				<el-table-column type="selection" width="80" v-if="batch == 5 && tabPages.type == 'todo'"></el-table-column>
				<el-table-column prop="id" label="ID" width="80"></el-table-column>
				<el-table-column prop="supplier_name" width="300" label="供应商名称"></el-table-column>
				<el-table-column prop="payment_methods" label="付款方式" width="100"></el-table-column>
				<el-table-column prop="user_name" label="申请人" width="120"></el-table-column>
				<el-table-column prop="apply_money" label="申请金额(元)" width="120"></el-table-column>
				<el-table-column prop="total_approve_paid" label="总批付(元)" width="120"></el-table-column>
				<el-table-column prop="total_actually_paid" label="总实付(元)" width="120"></el-table-column>
				<el-table-column prop="payment_subject" label="付款主体" width="100"></el-table-column>
				<el-table-column prop="payment_reason" label="付款事由" width="180"></el-table-column>
				<el-table-column prop="amounts_payable" label="应付金额(元)" width="120"></el-table-column>
				<el-table-column prop="status_label" label="状态" width="100px">
					<template slot-scope="scope">
						<span class="badge-color badge-ccc" v-if="scope.row.status == 0"></span>
						<span class="badge-color badge-blz" v-if="scope.row.status == 10"></span>
						<span class="badge-color badge-ybl" v-if="scope.row.status == 20"></span>
						<span class="badge-color badge-ygb" v-if="scope.row.status == 30"></span>
						<span>{{ scope.row.status_label }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="add_time" label="提交时间" width="180"></el-table-column>
				<el-table-column fixed="right" label="操作" align="center" width="240">
					<template slot-scope="scope">
						<span
							:class="['btnStyle margin-right-xxs', { 'text-ccc closeBtn': scope.row.btn.process == 0 }, { 'cp': scope.row.btn.process == 1 }]"
							@click="getInfo(scope.row.btn.process, 'process', scope.row.id)"
						>
							办理&nbsp;
							<span class="text-ccc">l</span>
						</span>
						<span :class="['btnStyle margin-right-xs', { 'text-ccc closeBtn': scope.row.btn.view == 0 }, { 'cp': scope.row.btn.view == 1 }]" @click="getInfo(scope.row.btn.view, 'view', scope.row.id)">查阅</span>
						<span :class="['btnStyle margin-right-xs', { 'text-ccc closeBtn': scope.row.btn.edit == 0 }, { 'cp': scope.row.btn.edit == 1 }]" @click="getInfo(scope.row.btn.view, 'edit', scope.row.id)">修改</span>
						<span
							:class="['btnStyle margin-right-xs', { 'text-ccc closeBtn': scope.row.btn.progress == 0 }, { 'cp': scope.row.btn.progress == 1 }]"
							@click="getInfo(scope.row.btn.progress, 'progress', scope.row.id)"
						>进度</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pagination">
			<el-pagination layout="prev, pager, next" :current-page="tabPages.page" :page-size="tabPages.page_size" :total="total" background @current-change="handleCurrentChange"></el-pagination>
		</div>
		<el-dialog title="财务批付" :visible.sync="operation.showDialog" width="50%">
			<div slot="title" class="dialog-header">财务批付</div>
			<div class="padding-sm">
				<span class="gongyingshang">
					供应商名称：
					<span class="text-blz">{{ gongyingshang }}</span>
				</span>
				<div v-if="record.length > 0">
					<el-table :data="record" border :summary-method="getSummaries" show-summary>
						<el-table-column prop="payment_subject" label="付款主体" width="120"></el-table-column>
						<el-table-column prop="payment_methods" label="付款方式"></el-table-column>
						<el-table-column prop="approve_paid" label="批付（元）" width="180px">
							<template slot-scope="scope">
								<span>{{ scope.row.approve_paid || 0 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="actually_paid" label="实付（元）" width="180px">
							<template slot-scope="scope">
								<span>{{ scope.row.actually_paid || 0 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="bank" label="开户行"></el-table-column>
						<el-table-column prop="account" label="账号"></el-table-column>
					</el-table>
				</div>
				<el-empty description="暂无" v-else></el-empty>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="operation.showDialog = false">关 闭</el-button>
			</span>
		</el-dialog>
		<el-dialog title :visible.sync="dialog.addDialog" width="60%" top="30px">
			<div slot="title" class="dialog-header" v-if="form.id && form.id != ''">付款申请修改</div>
			<div slot="title" class="dialog-header" v-else>付款申请</div>
			<div class="dialog-content-box" style="padding: 30px 10%;">
				<el-form ref="addForm" :rules="rules" :model="form" label-width="120px">
					<el-form-item label="所属分类" prop="category_id">
						<el-select v-model="form.category_id" clearable>
							<el-option v-for="(category, index) in categoryList" :key="index" :label="category.title" :disabled="category.status == 2" :value="category.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="供应商名称" prop="supplier_name">
						<el-autocomplete style="width: 100%;" @select="handlerSupplierSelect" v-model="form.supplier_name" value-key="supplier_name" :fetch-suggestions="querySupplierAsync"></el-autocomplete>
					</el-form-item>
					<el-form-item label="开户行" prop="bank">
						<el-input v-model="form.bank"></el-input>
					</el-form-item>
					<el-form-item label="账户" prop="account">
						<el-input v-model="form.account"></el-input>
					</el-form-item>
					<el-form-item label="付款方式" prop="payment_methods">
						<el-select v-model="form.payment_methods">
							<el-option v-for="op in defData.methods" :key="op.id" :label="op.title" :value="op.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="申请付款金额" prop="apply_money">
						<el-input :class="{ 'errorInput': form.apply_money < 0 }" v-model="form.apply_money" @input="priceChange(1, form.apply_money)"></el-input>
						<span class="text-blue" v-if="form.apply_money != ''">（{{ apply_moneyText }}）</span>
					</el-form-item>
					<el-form-item label="付款主体" prop="payment_subject">
						<el-select v-model="form.payment_subject">
							<el-option v-for="op in defData.subject" :key="op.id" :label="op.title" :value="op.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="付款事由" prop="payment_reason">
						<el-input type="textarea" v-model="form.payment_reason"></el-input>
					</el-form-item>
					<el-form-item label="应付金额" prop="amounts_payable">
						<el-input :class="{ 'errorInput': form.amounts_payable < 0 }" v-model="form.amounts_payable" @input="priceChange(2, form.amounts_payable)" @change="priceChange(2, form.amounts_payable)"></el-input>
						<span class="text-blue" v-if="form.amounts_payable != ''">（{{ amounts_payableText }}）</span>
					</el-form-item>
					<el-form-item label="附件">
						<el-upload class="avatar-uploader1" :action="$baseUrl + '/admin/common/upload'" :show-file-list="false" :on-success="uploadSuccess1">
							<img v-if="form.attachment" :src="$baseUrl + form.attachment" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm('addForm')">提交</el-button>
				<el-button @click="dialog.addDialog = false">关闭</el-button>
			</span>
		</el-dialog>

		<el-dialog title="付款申请详情" :visible.sync="operation.infoDialog" width="70%" top="30px">
			<div slot="title" class="dialog-header" v-if="operation.infoData.step == 5">出纳填写实付金额</div>
			<div slot="title" class="dialog-header" v-else>{{ operation.infoData.flow_name }}审批</div>
			<div class="dialog-content-box">
				<!-- <span class="flow">当前审批步骤：<span class="text-blz">{{operation.infoData.flow_name}}</span></span> -->
				<el-card class="box-card">
					<div slot="header" class="clearfix1">
						<span class="aaa"></span>付款申请详情
					</div>
					<div>
						<el-descriptions title>
							<el-descriptions-item label="申请人">{{ operation.infoData.user_name }}</el-descriptions-item>
							<el-descriptions-item label="供应商名称">{{ operation.infoData.supplier_name }}</el-descriptions-item>
							<el-descriptions-item label="开户行">{{ operation.infoData.bank }}</el-descriptions-item>
							<el-descriptions-item label="状态">
								<el-tag type="warning">{{ operation.infoData.status_label }}</el-tag>
							</el-descriptions-item>
							<el-descriptions-item label="账户">{{ operation.infoData.account }}</el-descriptions-item>
							<el-descriptions-item label="付款方式">{{ operation.infoData.payment_methods_title }}</el-descriptions-item>
							<el-descriptions-item label="申请时间">{{ operation.infoData.add_time }}</el-descriptions-item>
							<el-descriptions-item label="申请付款金额">
								<span class="text-blz">￥{{ operation.infoData.apply_money }}</span>
							</el-descriptions-item>
							<el-descriptions-item label="付款主体">{{ operation.infoData.payment_subject_title }}</el-descriptions-item>
							<el-descriptions-item label="付款事由">{{ operation.infoData.payment_reason }}</el-descriptions-item>
							<el-descriptions-item label="应付金额">
								<span class="text-blz">￥{{ operation.infoData.amounts_payable }}</span>
							</el-descriptions-item>
							<el-descriptions-item label="采购余额" v-if="operation.infoData.purchase_balance != 0">
								<span class="text-blz">￥{{ operation.infoData.purchase_balance }}</span>
							</el-descriptions-item>
							<el-descriptions-item label="财务余额" v-if="operation.infoData.financial_balance != 0">
								<span class="text-blz">￥{{ operation.infoData.financial_balance }}</span>
							</el-descriptions-item>
							<el-descriptions-item label="累计购入金额" v-if="operation.infoData.buy_balance != 0">
								<span class="text-blz">￥{{ operation.infoData.buy_balance }}</span>
							</el-descriptions-item>
							<el-descriptions-item label="累计付款金额" v-if="operation.infoData.payment_balance != 0">
								<span class="text-blz">￥{{ operation.infoData.payment_balance }}</span>
							</el-descriptions-item>
							<el-descriptions-item label="近一年购入金额" v-if="operation.infoData.last_year_buy_balance != 0">
								<span class="text-blz">￥{{ operation.infoData.last_year_buy_balance }}</span>
							</el-descriptions-item>
							<el-descriptions-item label="近一年付款金额" v-if="operation.infoData.last_year_payment_balance != 0">
								<span class="text-blz">￥{{ operation.infoData.last_year_payment_balance }}</span>
							</el-descriptions-item>
							<el-descriptions-item label="上次付款时间" v-if="operation.infoData.previous_pay_time">
								{{ operation.infoData.previous_pay_time }}
							</el-descriptions-item>
							<el-descriptions-item label="上次付款金额" v-if="operation.infoData.previous_payment_balance != 0">
								<span class="text-blz">￥{{ operation.infoData.previous_payment_balance }}</span>
							</el-descriptions-item>

							<el-descriptions-item label="附件" v-if="operation.infoData.attachment != ''">
								<el-image style="width: 100px; height: 100px" :src="$baseUrl + operation.infoData.attachment" :preview-src-list="[$baseUrl + operation.infoData.attachment]"></el-image>
							</el-descriptions-item>
						</el-descriptions>
						<div slot="header" class="clearfix1 margin-tb-sm" v-if="operation.infoData.step > 3 && operation.infoData.record && operation.infoData.record.length > 0">
							<span class="aaa"></span>财务总监批付
						</div>
						<div class="padding-lr-sm" v-if="operation.infoData.step > 3 && operation.infoData.record && operation.infoData.record.length > 0">
							<el-table :data="operation.infoData.record" border custom-class="dialogchildren" :summary-method="getSummaries" show-summary>
								<el-table-column prop="payment_subject" label="付款主体" show-overflow-tooltip></el-table-column>
								<el-table-column prop="payment_methods" label="付款方式" show-overflow-tooltip></el-table-column>
								<el-table-column prop="approve_paid" label="批付（元）" width="180px">
									<template slot-scope="scope">
										<span>￥{{ scope.row.approve_paid || 0 }}</span>
									</template>
								</el-table-column>
								<el-table-column prop="actually_paid" label="实付（元）" width="180px">
									<template slot-scope="scope">
										<span>￥{{ scope.row.actually_paid || 0 }}</span>
									</template>
								</el-table-column>
								<el-table-column prop="bank" label="开户行" show-overflow-tooltip></el-table-column>
								<el-table-column prop="account" label="账号"></el-table-column>
							</el-table>
							<!-- <el-row :gutter="24" class="tab-title">
								<el-col :span="4">付款主体</el-col>
								<el-col :span="4">付款方式</el-col>
								<el-col :span="4">批付（元）</el-col>
								<el-col :span="4">实付（元）</el-col>
								<el-col :span="4">开户行</el-col>
								<el-col :span="4">账号</el-col>
							</el-row>
							<el-row :gutter="24" v-for="(item,index) in operation.infoData.record" class="margin-lr">
								<el-col :span="4">{{item.payment_subject}}</el-col>
								<el-col :span="4">{{item.payment_methods}}</el-col>
								<el-col :span="4">￥{{item.approve_paid||0}}</el-col>
								<el-col :span="4">￥{{item.actually_paid||0}}</el-col>
								<el-col :span="4">{{item.bank}}</el-col>
								<el-col :span="4">{{item.account}}</el-col>
							</el-row>-->
						</div>
					</div>
				</el-card>

				<el-card class="box-card" v-if="infoType == 'process'">
					<div slot="header" class="clearfix1">
						<span class="aaa"></span>审批
					</div>
					<div>
						<div v-if="operation.infoData.step == 3" class="padding-lr-sm">
							<el-row :gutter="24" class="tab-title">
								<el-col :span="4">付款主体</el-col>
								<el-col :span="4">付款方式</el-col>
								<el-col :span="4">批付（元）</el-col>
								<el-col :span="4">开户行</el-col>
								<el-col :span="4">账号</el-col>
								<el-col :span="4">操作</el-col>
							</el-row>
							<el-row :gutter="24" v-for="(item, index) in todo.payment" class="margin-lr">
								<el-col :span="4">
									<el-select v-model="item.payment_subject">
										<el-option v-for="op in bankList.subject" :key="op.id" :label="op.title" :value="op.id"></el-option>
									</el-select>
								</el-col>
								<el-col :span="4">
									<el-select v-model="item.payment_methods">
										<el-option v-for="op in bankList.methods" :key="op.id" :label="op.title" :value="op.id"></el-option>
									</el-select>
								</el-col>
								<el-col :span="4">
									<el-input v-model="item.approve_paid" placeholder="请填写批付"></el-input>
								</el-col>
								<el-col :span="4">
									<el-select v-model="item.bank" placeholder="请选择开户行" @change="changeBank">
										<el-option v-for="op in bankList.bank" :key="op.id" :label="op.title" :value="op.id"></el-option>
									</el-select>
								</el-col>
								<el-col :span="4">
									<el-select v-model="item.account" placeholder="请选择账号">
										<el-option v-for="op in accountList" :key="op.id" :label="op.title" :value="op.id"></el-option>
									</el-select>
								</el-col>
								<el-col :span="4">
									<span class="text-blue cp" @click="addPay" v-if="todo.payment.length - 1 == index">添加</span>
									<span class="text-blue cp" @click="delPay(index)" v-else>删除</span>
								</el-col>
							</el-row>
						</div>
						<div v-if="operation.infoData.step == 5" class="padding-lr-sm">
							<el-row :gutter="24" class="tab-title">
								<el-col :span="4">付款主体</el-col>
								<el-col :span="4">付款方式</el-col>
								<el-col :span="4">批付</el-col>
								<el-col :span="4" class="text-blz">实付</el-col>
								<el-col :span="4">开户行</el-col>
								<el-col :span="4">账号</el-col>
							</el-row>
							<el-row :gutter="24" v-for="(item, index) in operation.infoData.record" class="margin-lr">
								<el-col :span="4" class="text-ccc">{{ item.payment_subject }}</el-col>
								<el-col :span="4" class="text-ccc">{{ item.payment_methods }}</el-col>
								<el-col :span="4" class="text-ccc">￥{{ item.approve_paid }}</el-col>
								<el-col :span="4" v-if="operation.infoData.step == 5">
									<el-input v-model="item.actually_paid" placeholder="请填写实付金额"></el-input>
								</el-col>
								<el-col :span="4" v-if="operation.infoData.step == 6 || operation.infoData.step == 7">￥{{ item.actually_paid }}</el-col>
								<el-col :span="4" class="text-ccc">{{ item.bank }}</el-col>
								<el-col :span="4" class="text-ccc">{{ item.account }}</el-col>
							</el-row>
						</div>
						<el-form ref="addForm" :model="addForm" label-width="130px" class="margin-top-sm">
							<el-form-item label="采购余额" v-if="operation.infoData.step == 1">
								<el-input v-model="todo.purchase_balance"></el-input>
							</el-form-item>
							<el-form-item label="累计购入金额" v-if="operation.infoData.step == 2">
								<el-input v-model="todo.buy_balance"></el-input>
							</el-form-item>
							<el-form-item label="累计付款金额" v-if="operation.infoData.step == 2">
								<el-input v-model="todo.payment_balance"></el-input>
							</el-form-item>
							<el-form-item label="财务余额" v-if="operation.infoData.step == 2">
								<el-input disabled :value="financial_balance"></el-input>
							</el-form-item>
							<el-form-item label="近一年购入金额" v-if="operation.infoData.step == 2">
								<el-input v-model="todo.last_year_buy_balance"></el-input>
							</el-form-item>
							<el-form-item label="近一年付款金额" v-if="operation.infoData.step == 2">
								<el-input v-model="todo.last_year_payment_balance"></el-input>
							</el-form-item>
							<el-form-item label="上次付款时间" v-if="operation.infoData.step == 2">
								<el-input disabled :value="operation.infoData.previous_pay_time"/>
							</el-form-item>
							<el-form-item label="上次付款金额" v-if="operation.infoData.step == 2">
								<el-input  disabled :value="operation.infoData.previous_payment_balance"></el-input>
							</el-form-item>

							<el-form-item label="备注">
								<el-upload class="avatar-uploader" :headers="headers" :action="$baseUrl + '/admin/common/upload'" :show-file-list="false" :on-success="uploadSuccess"></el-upload>
								<quill-editor class="quill-editor ql-editor" v-model="todo.audit_desc" ref="myQuillEditor" :options="editorOption"></quill-editor>
							</el-form-item>
						</el-form>
					</div>
				</el-card>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitApprove(2, operation.infoData.step)" v-if="infoType == 'process'">同意</el-button>
				<el-button type="danger" @click="submitApprove(3, operation.infoData.step)" v-if="infoType == 'process'">驳回</el-button>
				<el-button @click="operation.infoDialog = false">关闭</el-button>
			</span>
		</el-dialog>
		<el-dialog title="审批进度" :visible.sync="operation.progressDialog" width="96%" top="30px" class="progress">
			<div slot="title" class="dialog-header">审批进度</div>
			<div class="dialog-content-box">
				<div class="processTitle">
					<div v-for="(item, index) in operation.progress.flow" :class="['defStyle', { 'bgStyle': item.status == 1 }, { 'bgStyle1': item.flow_step == 0 }]">
						<div class="title">
							<span>{{ index + 1 }}</span>
							{{ item.flow_name }}
						</div>
						<div class="el-step__arrow" v-if="operation.progress.flow.length != index + 1"></div>
					</div>
				</div>
				<div class="dialog-info">
					<div class="block margin-lr-xl" v-if="operation.progress.record.length > 0">
						<Timeline :recordList="operation.progress.record"></Timeline>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitFormAdd('addForm')" v-if="infoType == 'process'">同意</el-button>
				<el-button type="danger" @click="submitFormAdd('addForm')" v-if="infoType == 'process'">驳回</el-button>
				<el-button @click="operation.progressDialog = false">关闭</el-button>
			</span>
		</el-dialog>
		<el-dialog title="批量审批" :visible.sync="operation.batchDialog" width="40%" top="30px" class="progress">
			<div slot="title" class="dialog-header">批量审批</div>
			<div class="dialog-content-box">
				<el-form ref="addForm" :model="addForm" label-width="60px" class="margin-top-sm">
					<el-form-item label="备注">
						<el-upload class="avatar-uploader" :headers="headers" :action="$baseUrl + '/admin/common/upload'" :show-file-list="false" :on-success="uploadSuccess"></el-upload>
						<quill-editor class="quill-editor ql-editor" v-model="todo.audit_desc" ref="myQuillEditor" :options="editorOption"></quill-editor>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="batchApprove('2')">同意</el-button>
				<!-- <el-button type="danger" @click="batchApprove('3')">驳回</el-button> -->
				<el-button @click="operation.batchDialog = false">关闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
	paymentlist,
	getUserListcommon,
	addFlow,
	getInfo,
	approve,
	editApply,
	getPaymentCfg,
	paymentApply,
	batchHandle,
	getBankList,
	getAccount,
	categoryList,
	searchSupplier,
	exportToExcel
} from './index';
import {
	getCount
} from '../../api/index.js';
import Timeline from "../../components/Timeline.vue"
import {
	quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
	name: 'basetable',
	components: {
		quillEditor,
		Timeline
	},
	data() {
		var checkAge = (rule, value, callback) => {
			let reg = /^[0-9]*[1-9][0-9]*$/
			if (!reg.test(value)) {
				return callback(new Error('输入数字'));
			} else {
				callback()
			}
		};
		var num = (rule, value, callback) => {
			let reg = /^([1-9]{1})(\d{13}|\d{18})$/;
			if (!reg.test(value)) {
				return callback(new Error('请输入14到18位账户号'));
			} else {
				callback()
			}
		};
		var price = (rule, value, callback) => {
			let reg = /^(-?[0-9]+)(\.\d{1,2})?$/;
			if (!reg.test(value)) {
				return callback(new Error('请输入正确金额'));
			} else {
				callback()
			}
		};
		return {
			expends: [],
			bankList: {
				bank: [],
				methods: [],
				subject: [],
			},
			accountList: [],
			headers: {
				Authorization: "Bearer " + localStorage.getItem("user-token")
			},
			batch: '',
			editorOption: { //配置富文本需要的功能
				// theme: "snow",//默认是这个，这个代码不注释会显示富文本所有的功能
				placeholder: '请输入备注',
				modules: {
					toolbar: {
						container: [
							['italic', 'bold', 'underline'],
							[{
								'align': []
							}],
							['image']
						], // 工具栏
						handlers: { //这里把点击upload的焦点绑定到富文本框图片上
							'image': function (value) {
								if (value) {
									document.querySelector('.avatar-uploader input').click()
								} else {
									this.quill.format('image', false);
								}
							}
						}
					}
				}
			},
			multipleSelection: [],
			form: {
				supplier_id: '',
				supplier_name: '',
				bank: '',
				account: '',
				payment_methods: '',
				apply_money: '',
				payment_subject: '',
				payment_reason: '',
				amounts_payable: '',
				attachment: '',
				category_id: ''
			},
			apply_moneyText: '',
			amounts_payableText: '',
			todo: {
				purchase_balance: '',
				financial_balance: '',
				buy_balance: '',
				payment_balance: '',
				last_year_buy_balance: '',
				last_year_payment_balance: '',
				audit_desc: '',
				previous_payment_balance: '',
				previous_pay_time: '',
				payment: [{
					payment_subject: '',
					payment_methods: '',
					approve_paid: '',
					bank: '',
					account: ''
				}],
			},
			tableData: [],
			total: 0,
			summary: {},
			tabPages: {
				page: 1,
				page_size: 17,
				type: 'all',
				status: '',
				startTime: '',
				endTime: '',
				key: '',
				supplier_name: ''
			},
			dialog: {
				addDialog: false,
			},
			userList: [],
			addForm: {
				title: '',
				approve: '',
				step: '',
			},
			defData: {
				methods: [],
				subject: []
			},
			id: '',
			infoType: '',
			rules: {
				title: [{
					required: true,
					message: '请输入流程名称',
					trigger: 'blur'
				},
				{
					min: 2,
					max: 20,
					message: '长度在 2 到 20 个字符',
					trigger: 'blur'
				}
				],
				step: [{
					required: true,
					validator: checkAge,
					trigger: 'blur'
				}],
				approve: [{
					required: true,
					message: '请选择审批人',
					trigger: 'change'
				}]
			},
			operation: {
				showDialog: false,
				infoDialog: false,
				batchDialog: false,
				infoData: {},
				progressDialog: false,
				progress: {
					flow: [],
					record: []
				}
			},
			rules: {
				category_id: [{
					required: true,
					message: '请选择所属分类',
					trigger: 'blur'
				}],
				supplier_name: [{
					required: true,
					message: '请输入供应商名称',
					trigger: 'blur'
				}],
				bank: [{
					required: true,
					message: '请输入开户行',
					trigger: 'blur'
				}],
				account: [{
					required: true,
					message: '请输入账户',
					trigger: 'blur'
				}],
				payment_methods: [{
					required: true,
					message: '请选择付款方式',
					trigger: 'change'
				}],
				apply_money: [{
					required: true,
					validator: price,
					message: '请填写申请付款金额',
					trigger: 'blur'
				}],
				payment_subject: [{
					required: true,
					message: '请选择付款主体',
					trigger: 'change'
				}],
				payment_reason: [{
					required: true,
					message: '请输入付款事由',
					trigger: 'blur'
				}],
				amounts_payable: [{
					required: true,
					validator: price,
					message: '请填写应付金额',
					trigger: 'blur'
				}],
			},
			record: [],
			gongyingshang: '',
			breadcrumbIndex: 'all',
			breadcrumbList: [{
				id: 'todo',
				title: '待办工作',
				count: 0
			},
			{
				id: 'process',
				title: '已办工作',
				count: 0
			},
			{
				id: 'close',
				title: '已关闭工作',
				count: 0
			},
			{
				id: 'reject',
				title: '已驳回',
				count: 0
			},
			{
				id: 'all',
				title: '全部',
				count: 0
			},
			],
			dateRange: [],
			showSearchPopover: false,

			categoryList: [],
			timeout: null,
			showExportPopover: false
		};
	},
	created() {
		let userInfo = localStorage.getItem("userInfo");
		userInfo = JSON.parse(userInfo)
		this.batch = userInfo.group_id
		this.getTab()
		this.getPaymentCfg()
		this.getCategoryList()
		// this.getUserListcommon()
	},
	methods: {



		onExportClick() {
			let me = this;
			this.showSearchPopover = false;

			exportToExcel(this.tabPages).then(res => {
				console.log(res);
				const { status, data } = res;
				if (status == 200) {
					me.$alert(data.src, '', {
						confirmButtonText: '下载',
						callback: action => {
							if (action == 'confirm') {
								window.open(data.src)
							}
						}
					});
				}
			})
		},

		cancelSearch() {
			this.tabPages.search = 0;
			this.tabPages.startTime = '';
			this.showSearchPopover = false;
		},

		resetSearch() {
			this.tabPages.startTime = '';
			this.tabPages.endTime = '';
			this.dateRange = null;
			this.tabPages.status = '';
			this.tabPages.key = '';
			this.tabPages.supplier_name = '';
			this.tabPages.search = 0;
		},

		onSearch() {
			this.tabPages.search = 1
			this.getTab()
		},

		handlerSupplierSelect(options) {

			if (options) {
				this.form.supplier_name = options.supplier_name
				this.form.bank = options.bank
				this.form.account = options.account
				this.form.supplier_id = options.id
			}

		},

		querySupplierAsync(queryString, cb) {
			if (queryString) {
				searchSupplier(queryString).then(res => {
					clearTimeout(this.timeout);
					this.timeout = setTimeout(() => {
						cb(res.data);
					}, 1000 * Math.random());
				})
			}

		},

		// 获取所属分类
		getCategoryList() {
			categoryList().then(res => {
				this.categoryList = res.data
			})
		},

		onDateChange(e) {
			if (e) {
				this.tabPages.startTime = e[0]
				this.tabPages.endTime = e[1]
			} else {
				this.tabPages.startTime = ''
				this.tabPages.endTime = ''
			}
		},

		changeBank(id) {
			this.getAccount(id)
		},
		getAccount(id) {
			getAccount({
				id: id
			}).then(res => {
				this.accountList = res.data
			});
		},
		payApply() {
			this.dialog.addDialog = true;
			this.id = '';
			this.form = this.$options.data().form
		},
		batchApprove(status) {
			let ids = this.multipleSelection.map(item => item.id)
			batchHandle({
				ids: ids,
				status: status,
				audit_desc: this.todo.audit_desc
			}).then(res => {
				this.operation.batchDialog = false
				this.getTab()
				this.$message.success('审批成功');
			});
		},
		batchHandle() {
			if (this.multipleSelection < 1) {
				this.$message.error('请选中一条审批数据');
				return
			}
			this.operation.batchDialog = true
		},
		getExpends() {
			var Id = this.tableData.map(item => {
				// console.log(item)
				if (item.record.length > 0) {
					return item.id
				}
			})
			this.expends = Id
		},
		getRowKeys(row) {
			return row.id
		},
		updateMsg() {
			getCount().then(res => {
				this.breadcrumbList[0].count = res.data[0].count
				localStorage.setItem('menuList', JSON.stringify(res.data));
				if (res.data != null) {
					res.data.forEach(item => {
						if (item.index == this.getParam()) {
							if (item.children) {
								this.breadcrumbList[0].count = item.children[0].count
								this.$store.state.subs = item.children
							}
						}
					})
				}
				this.$store.state.MenuLoading = false
				this.$nextTick(() => {
					this.$store.state.MenuLoading = true
					this.$forceUpdate()
				})
			});
		},
		getParam() {
			let url = window.location.href
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = url.split('#')[1].substr(1)
			return r;
		},
		// 上传图片
		uploadSuccess(res, file) {
			console.log(res)
			// 首先获取富文本编辑器的实例
			let quill = this.$refs.myQuillEditor.quill
			if (res.status == 200) {
				// 获取光标所在位置
				let length = quill.getSelection().index;
				// 插入图片res为服务器返回的数据
				quill.insertEmbed(length, 'image', this.$baseUrl + res.data.src)
				// 光标移动至文本末端
				quill.setSelection(length + 1)
			} else {
				this.$message.error('图片插入失败!');
			}
		},
		uploadSuccess1(res, file) {
			if (res.status == 200) {
				this.form.attachment = res.data.src
			} else {
				this.$message.error('图片插入失败!');
			}
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		getSummaries(param) {
			const {
				columns,
				data
			} = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index == 3 || index == 2) {

					if (index === 0) {
						sums[index] = '总价';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						if (index == 2) {
							sums[index] = '总批付：￥' + sums[index]
						}
						if (index == 3) {
							sums[index] = '总实付：￥' + sums[index]
						}
						// sums[index] += ' 元';
					} else {
						sums[index] = 'N/A';
					}
				}
			});

			return sums;
		},
		showInfo(item) {
			this.record = item.record
			this.gongyingshang = item.supplier_name
			this.operation.showDialog = true
		},
		submitForm(formName) {
			let data = {}
			if (!this.form.supplier_id) {
				this.form.supplier_id = 0
			}
			data.row = this.form
			if (this.form.id && this.form.id != '') {
				data.id = this.form.id
				// data.btn='edit'
				this.$refs[formName].validate((valid) => {
					if (valid) {
						editApply(data).then(res => {
							this.dialog.addDialog = false
							this.getTab()
							this.$message.success('修改成功');
						});
						// paymentApply(data).then(res => {
						// 	this.dialog.addDialog = false
						// 	this.getTab()
						// 	this.$message.success('申请成功');
						// });
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			} else {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						paymentApply(data).then(res => {
							this.dialog.addDialog = false
							this.getTab()
							this.$message.success('申请成功');
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}

		},
		priceChange(code, number) {
			var ret = "";
			if (number != "" && number != null && number != "0") {
				var unit = "仟佰拾亿仟佰拾万仟佰拾元角分",
					str = "";
				number += "00";
				var point = number.indexOf(".");
				if (point >= 0) {
					number = number.substring(0, point) + number.substr(point + 1, 2);
				}
				unit = unit.substr(unit.length - number.length);
				for (var i = 0; i < number.length; i++) {
					str +=
						"零壹贰叁肆伍陆柒捌玖".charAt(number.charAt(i)) + unit.charAt(i);
				}
				ret =
					str
						.replace(/零(仟|佰|拾|角)/g, "零")
						.replace(/(零)+/g, "零")
						.replace(/零(万|亿|元)/g, "$1")
						.replace(/(亿)万|(拾)/g, "$1$2")
						.replace(/^元零?|零分/g, "")
						.replace(/元$/g, "元") + "整";
			}

			if (code == 1) {
				this.apply_moneyText = ret;
				if (number < 0) {
					this.apply_moneyText = '负' + ret
				}
			} else {
				this.amounts_payableText = ret;
				if (number < 0) {
					this.amounts_payableText = '负' + ret
				}
			}

		},
		submitApprove(code, step, id) {

			if (this.id == '') {
				this.id = id
			}
			let data = {
				id: this.id,
				status: code,
				audit_desc: this.todo.audit_desc
			}
			if (code == 2) {
				if (step == 1) {
					data.purchase_balance = this.todo.purchase_balance
					if (this.todo.purchase_balance == '') {
						this.$message.error('请填写采购余额');
						return
					}
					this.approve(data)
				}
				if (step == 2) {
					data.buy_balance = this.todo.buy_balance
					data.payment_balance = this.todo.payment_balance
					data.last_year_buy_balance = this.todo.last_year_buy_balance
					data.last_year_payment_balance = this.todo.last_year_payment_balance
					data.financial_balance = this.financial_balance;
					data.previous_payment_balance = this.todo.previous_payment_balance
					data.previous_pay_time = this.todo.previous_pay_time
					this.approve(data)
				}
				if (step == 3) {
					data.payment = this.todo.payment
					this.approve(data)
				}
				if (step == 4 || step == 6 || step == 7) {
					this.approve(data)
				}
				if (step == 5) {
					data.payment = []
					this.operation.infoData.record.forEach(item => {
						data.payment.push({
							id: item.id,
							actually_paid: item.actually_paid
						})
					})
					this.approve(data)
				}
			} else {
				if (this.todo.audit_desc == '') {
					this.$message.error('请填写备注');
					return
				}
				approve(data).then(res => {
					this.operation.infoDialog = false
					this.getTab()
					this.todo.payment = this.$options.data().todo.payment
					this.$message.success('审批成功');
				});
			}


		},
		changeBreadcrumb(id) {
			this.tabPages.page = 1
			this.tabPages.type = id
			this.resetSearch()
			this.getTab();
		},
		addPay() {
			this.todo.payment.push({
				payment_subject: '',
				payment_methods: '',
				approve_paid: '',
				bank: '',
				account: ''
			})
		},
		delPay(index) {
			this.todo.payment.splice(index, 1)
		},
		getPaymentCfg() {
			getPaymentCfg().then(res => {
				this.defData = res.data
			});
			getBankList().then(res => {
				this.bankList = res.data
			});

		},
		approve(data) {
			approve(data).then(res => {
				this.operation.infoDialog = false
				this.getTab()
				this.todo.payment = this.$options.data().todo.payment
				this.$message.success('审批成功');
			});
		},
		getInfo(type, btn, id) {
			this.id = id
			this.infoType = btn
			this.todo = this.$options.data().todo
			if (type == 1 && btn == 'process') {
				// this.todo.todoInfo = true
				getInfo({
					id: id,
					type: 'view',
				}).then(res => {
					this.operation.infoDialog = true
					this.operation.infoData = res.data
				});

			}
			if (type == 1 && btn == 'view') {
				getInfo({
					id: id,
					type: 'view'
				}).then(res => {
					this.operation.infoDialog = true
					this.operation.infoData = res.data
				});

			}
			if (type == 1 && btn == 'progress') {
				getInfo({
					id: id,
					type: 'progress'
				}).then(res => {
					this.operation.progressDialog = true
					this.operation.progress = res.data
				});

			}
			if (type == 1 && btn == 'edit') {
				getInfo({
					id: id,
					type: 'view'
				}).then(res => {
					this.dialog.addDialog = true
					this.priceChange(1, res.data.apply_money)
					this.priceChange(2, res.data.amounts_payable)
					this.form.category_id = res.data.category_id
					this.form.supplier_name = res.data.supplier_name
					this.form.bank = res.data.bank
					this.form.account = res.data.account
					this.form.payment_methods = res.data.payment_methods
					this.form.apply_money = res.data.apply_money
					this.form.payment_subject = res.data.payment_subject
					this.form.payment_reason = res.data.payment_reason
					this.form.amounts_payable = res.data.amounts_payable
					this.form.attachment = res.data.attachment
					this.form.id = res.data.id


				});

			}

		},
		//列表
		getTab() {
			this.updateMsg()
			this.showSearchPopover = false

			paymentlist(this.tabPages).then(res => {
				this.tableData = res.data.list
				this.total = res.data.total
				this.summary = res.data.summary
				// this.getExpends();


			}).finally(() => {
				this.tabPages.search = 0
			});
		},
		handleCurrentChange(val) {
			this.tabPages.page = val
			this.getTab()
		}
	},


	computed: {
		financial_balance() {

			if (isNaN(this.todo.buy_balance) || isNaN(this.todo.payment_balance)) {
				return 0
			} else {
				return this.todo.buy_balance - this.todo.payment_balance
			}
		}
	}
}
</script>

<style scoped lang="less">
	/deep/.el-descriptions-item__label{
		white-space: nowrap;
		// min-width: 100px;
		color: #888;
	}
.statistics1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30px;
	font-weight: bold;
	margin-bottom: 20px;
	font-size: 18px;
	line-height: 30px;

	.label-item {
		margin-left: 36px;

		span {
			font-size: 22px;
			color: #2f80ed;
		}
	}
}

.statistics {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30px;
	font-weight: bold;
	margin-bottom: 20px;
	font-size: 18px;
	line-height: 18px;

	.statistics-item {
		display: flex;

		.val-item {
			font-size: 22px;
			color: #ffaa00;
			// color: #2F80ED;
		}
	}
}

.avatar-uploader1 {
	/deep/.el-upload {
		border: 1px dashed #d9d9d9 !important;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	/deep/.el-upload:hover {
		border-color: #409eff;
	}
}

.avatar-uploader1 .avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.errorInput {
	/deep/.el-input__inner {
		color: red !important;
	}
}

.dialogchildren {
	th {
		background: #fff !important;
	}
}

.opinion img {
	height: 300px !important;
}

/deep/.quill-editor {
	height: 400px;
	margin-top: -57px;

	//内容框高度
	.ql-container {
		height: 300px;
	}

	.ql-container.ql-snow {
		height: 300px !important;
	}
}

.clearfix {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.clearfix1 {
	display: flex;
	align-items: center;
}

.gongyingshang {
	position: absolute;
	margin-top: -50px;
}

.box-card .aaa {
	width: 4px !important;
	height: 22px !important;
	line-height: 24px;
	background: #2f80ed !important;
	display: inline-block !important;
	margin-right: 10px !important;
}

.dialog-content-box {
	// padding: 0 10%;
	.flow {
		position: absolute;
		right: 60px;
		margin-top: -30px;
	}

	.el-form-item {
		margin-bottom: 20px !important;
	}
}

/deep/.el-descriptions__body {
	padding: 0 20px;
	font-size: 16px;
}

/deep/.el-dialog__body {
	padding: 0 !important;
}

/deep/.el-card {
	border-top: 0 !important;
	box-shadow: none;
	border-bottom: 0 !important;
}

.el-card:nth-child(1) {
}

/deep/.el-row {
	border: 1px solid #ebeef5;
	border-right: 0 !important;
	border-top: 0 !important;

	.el-col {
		height: 40px;
		line-height: 40px;
		border-right: 1px solid #ebeef5;
		overflow: hidden;

		.price {
			display: flex;
			align-items: center;

			.el-input {
				width: 100px;
			}

			span {
				font-size: 13px;
			}
		}

		.el-input__inner {
			border: 0 !important;
			padding: 0 !important;
		}
	}
}

.tab-title {
	border-top: 1px solid #ebeef5 !important;
	background: #f8f8fa;
	color: #5c5c5c;
	font-weight: bold;
}

// /deep/.el-form-item.is-error .el-input__inner,
// /deep/.el-form-item.is-error .el-input__inner:focus,
// /deep/.el-form-item.is-error .el-textarea__inner,
// /deep/.el-form-item.is-error .el-textarea__inner:focus,
// /deep/.el-message-box__input input.invalid,
// /deep/.el-message-box__input input.invalid:focus {
// 	border-color: #fff;
// }

.search-form {
	padding: 0 20px;
	margin-bottom: 12px;
}
</style>
